<template>
<div>

  <el-row v-if="gameOptions" class="gameClass">
    <button v-for="(item,index) in gameOptions" @click="changeGame(item)" :key="index" :class="selectedGame.value === item.value?'isGameClassBtn':''">
      {{item.label}}
    </button>
  </el-row>

  <el-row class="bread-nav">
    <ul class="bread-nav-title">
      <span>基准赔率</span>
    </ul>
    <ul class="bread-nav-content-right">
      <button @click="changeGame('')">
        刷新
      </button>
    </ul>
  </el-row>

  <el-row class="baseOdd-content">
    <table class="top-table">
      <tbody>
      <tr>
        <td v-for="(list,index) in nowGameOdd" :key="index">
          <table class="gameOdds">
            <thead>
            <tr>
              <th>
                交易类型
              </th>
              <th>
                平均赔率
              </th>
              <th>
                最高赔率
              </th>
              <th>
                A盘（降）
              </th>
              <th>
                B盘（降）
              </th>
              <th>
                C盘（降）
              </th>
              <th>
                D盘（降）
              </th>
              <th>
                勾选
              </th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index1) in list" :key="index1" class="gameOdds-info">
              <td>
                {{item.name}}
              </td>
              <td>
                <input type="text" v-model="item.odds" @keydown="onlyNum(item.odds, $event)">
              </td>
              <td>
                <input type="text" v-model="item.max_odds" @keydown="onlyNum(item.max_odds, $event)">
              </td>
              <td>
                <input type="text" v-model="item.a_diff" @keydown="onlyNum(item.a_diff, $event)">
              </td>
              <td>
                <input type="text" v-model="item.b_diff" @keydown="onlyNum(item.b_diff, $event)">
              </td>
              <td>
                <input type="text" v-model="item.c_diff" @keydown="onlyNum(item.c_diff, $event)">
              </td>
              <td>
                <input type="text" v-model="item.d_diff" @keydown="onlyNum(item.d_diff, $event)">
              </td>
              <td>
                <label>
                  <input type="checkbox" v-model="item.checked" @change="changeCheckbox()">
                </label>
              </td>
            </tr>
            </tbody>
          </table>
        </td>
      </tr>
      </tbody>
    </table>
  </el-row>

  <el-row class="baseOdd-middle">
    <ul>
      <span>快速设置</span>
    </ul>
    <ul>
      <span>快升</span>
      <button @click="changeOdds('+',0.01)">
        +0.01
      </button>
      <button @click="changeOdds('+',0.05)">
        +0.05
      </button>
      <button @click="changeOdds('+',0.1)">
        +0.1
      </button>
      <button @click="changeOdds('+',0.5)">
        +0.5
      </button>
      <button @click="changeOdds('+',1)">
        +1
      </button>
      <button @click="changeOdds('+',1.5)">
        +1.5
      </button>
      <button @click="changeOdds('+',2)">
         +2
      </button>
      <button @click="changeOdds('+',2.5)">
          +2.5
      </button>
    </ul>
    <ul>
      <span>快降</span>
      <button @click="changeOdds('-',0.01)">
        -0.01
      </button>
      <button @click="changeOdds('-',0.05)">
        -0.05
      </button>
      <button @click="changeOdds('-',0.1)">
        -0.1
      </button>
      <button @click="changeOdds('-',0.5)">
        -0.5
      </button>
      <button @click="changeOdds('-',1)">
        -1
      </button>
      <button @click="changeOdds('-',1.5)">
        -1.5
      </button>
      <button @click="changeOdds('-',2)">
        -2
      </button>
      <button @click="changeOdds('-',2.5)">
        -2.5
      </button>
    </ul>
  </el-row>

  <el-row class="baseOdd-footer">
  <ul>
    <label>
      <input type="checkbox" v-model="checked_odds">平均赔率:
    </label>
    <input type="text" v-model="text_odds" @keydown="onlyNum(text_odds, $event)">
  </ul>
  <ul>
    <label>
      <input type="checkbox" v-model="checked_max_odds">最高赔率:
    </label>
    <input type="text" v-model="text_max_odds" @keydown="onlyNum(text_max_odds, $event)">
  </ul>
  <ul>
    <label>
      <input type="checkbox" v-model="checked_a_diff">A盘（降）:
    </label>
    <input type="text" v-model="text_a_diff" @keydown="onlyNum(text_a_diff, $event)">
  </ul>
  <ul>
    <label>
      <input type="checkbox" v-model="checked_b_diff">B盘（降）:
    </label>
    <input type="text" v-model="text_b_diff" @keydown="onlyNum(text_b_diff, $event)">
  </ul>
  <ul>
    <label>
      <input type="checkbox" v-model="checked_c_diff">C盘（降）:
    </label>
    <input type="text" v-model="text_c_diff" @keydown="onlyNum(text_c_diff, $event)">
  </ul>
  <ul>
    <label>
      <input type="checkbox" v-model="checked_d_diff">D盘（降）:
    </label>
    <input type="text" v-model="text_d_diff" @keydown="onlyNum(text_d_diff, $event)">
  </ul>
  <ul>
    <button @click="transferBtn">传送</button>
    <label>
      <input type="checkbox" v-model="chooseAll" @change="toChooseAll">全选
    </label>
    <button @click="selectOther">反选</button>
  </ul>
  </el-row>

  <el-row class="baseOdd-bottom">
    <button @click="subBtn">确认</button>
    <button @click="cancelBtn">取消</button>
  </el-row>

  <el-dialog
    title="用户提示"
    :visible.sync="dialogVisible"
    width="30%">
    <ul class="myDialog">
      <li>
        <span>{{messTip}}</span>
      </li>
      <li>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </li>
    </ul>
  </el-dialog>

</div>
</template>

<script>
  import { Message } from 'element-ui'
  import { mapGetters } from 'vuex'
  export default {
    name: 'benchmarkOdds',
    computed: {
      ...mapGetters([
        'gameOptions', // 彩种列表
      ]),
    },
    methods: {
      // 控制键盘输入，只允许输入数字与小数点
      onlyNum(value, e) {
        let isOK = false
        const key = window.event ? e.keyCode : e.which
        if ((key > 95 && key < 106) || // 小键盘上的0到9
          (key > 47 && key < 60) || // 大键盘上的0到9
          (key === 110 && value.indexOf('.') < 0) || // 小键盘上的.而且以前没有输入.
          (key === 190 && value.indexOf('.') < 0) || // 大键盘上的.而且以前没有输入.
          key === 8 || key === 9 || key === 46 || key === 37 || key === 39 // 不影响正常编辑键的使用(8:BackSpace;9:Tab;46:Delete;37:Left;39:Right)
        ) {
          isOK = true
        } else {
          if (window.event) { // IE
            e.returnValue = false // event.returnValue=false 效果相同.
          } else { // Firefox
            e.preventDefault()
          }
        }
        e.returnValue = isOK
      },
      getGameOptions() {
        this.$store.dispatch('GameOptionss')
        this.selectedGame = this.gameOptions[0]
      },
      // 传送按钮的事件
      transferBtn() {
        let showTip = true
        for (const key in this.nowGameOdd) {
          for (const index in this.nowGameOdd[key]) {
            if (this.nowGameOdd[key][index].checked) {
              if (this.checked_odds) {
                showTip = false
                this.nowGameOdd[key][index].odds = Math.round(this.text_odds * 100) / 100
              }
              if (this.checked_max_odds) {
                showTip = false
                this.nowGameOdd[key][index].max_odds = Math.round(this.text_max_odds * 100) / 100
              }
              if (this.checked_a_diff) {
                showTip = false
                this.nowGameOdd[key][index].a_diff = Math.round(this.text_a_diff * 100) / 100
              }
              if (this.checked_b_diff) {
                showTip = false
                this.nowGameOdd[key][index].b_diff = Math.round(this.text_b_diff * 100) / 100
              }
              if (this.checked_c_diff) {
                showTip = false
                this.nowGameOdd[key][index].c_diff = Math.round(this.text_c_diff * 100) / 100
              }
              if (this.checked_d_diff) {
                showTip = false
                this.nowGameOdd[key][index].d_diff = Math.round(this.text_d_diff * 100) / 100
              }
            }
          }
        }
        if (showTip) {
          this.messTip = '请选择下注类别及修改项目！'
          this.dialogVisible = true
        }
      },
      // 点击数字改变对应数据
      changeOdds(symbol, value) {
        let showTip = true
        for (const key in this.nowGameOdd) {
          for (const index in this.nowGameOdd[key]) {
            if (symbol === '+') {
              if (this.nowGameOdd[key][index].checked) {
                if (this.checked_odds) {
                  showTip = false
                  this.nowGameOdd[key][index].odds = Math.round((value + this.nowGameOdd[key][index].odds) * 100) / 100
                }
                if (this.checked_max_odds) {
                  showTip = false
                  this.nowGameOdd[key][index].max_odds = Math.round((value + this.nowGameOdd[key][index].max_odds) * 100) / 100
                }
                if (this.checked_a_diff) {
                  showTip = false
                  this.nowGameOdd[key][index].a_diff = Math.round((value + this.nowGameOdd[key][index].a_diff) * 100) / 100
                }
                if (this.checked_b_diff) {
                  showTip = false
                  this.nowGameOdd[key][index].b_diff = Math.round((value + this.nowGameOdd[key][index].b_diff) * 100) / 100
                }
                if (this.checked_c_diff) {
                  showTip = false
                  this.nowGameOdd[key][index].c_diff = Math.round((value + this.nowGameOdd[key][index].c_diff) * 100) / 100
                }
                if (this.checked_d_diff) {
                  showTip = false
                  this.nowGameOdd[key][index].d_diff = Math.round((value + this.nowGameOdd[key][index].d_diff) * 100) / 100
                }
              }
            } else {
              if (this.nowGameOdd[key][index].checked) {
                if (this.checked_odds) {
                  showTip = false
                  this.nowGameOdd[key][index].odds = Math.round((this.nowGameOdd[key][index].odds - value) * 100) / 100
                }
                if (this.checked_max_odds) {
                  showTip = false
                  this.nowGameOdd[key][index].max_odds = Math.round((this.nowGameOdd[key][index].max_odds - value) * 100) / 100
                }
                if (this.checked_a_diff) {
                  showTip = false
                  this.nowGameOdd[key][index].a_diff = Math.round((this.nowGameOdd[key][index].a_diff - value) * 100) / 100
                }
                if (this.checked_b_diff) {
                  showTip = false
                  this.nowGameOdd[key][index].b_diff = Math.round((this.nowGameOdd[key][index].b_diff - value) * 100) / 100
                }
                if (this.checked_c_diff) {
                  showTip = false
                  this.nowGameOdd[key][index].c_diff = Math.round((this.nowGameOdd[key][index].c_diff - value) * 100) / 100
                }
                if (this.checked_d_diff) {
                  showTip = false
                  this.nowGameOdd[key][index].d_diff = Math.round((this.nowGameOdd[key][index].d_diff - value) * 100) / 100
                }
              }
            }
          }
        }
        if (showTip) {
          this.messTip = '请选择下注类别及修改项目！'
          this.dialogVisible = true
        }
      },
      // 选择全部
      toChooseAll() {
        for (const key in this.nowGameOdd) {
          for (const index in this.nowGameOdd[key]) {
            this.nowGameOdd[key][index].checked = this.chooseAll
          }
        }
      },
      // 反选
      selectOther() {
        this.chooseAll = false
        for (const key in this.nowGameOdd) {
          for (const index in this.nowGameOdd[key]) {
            this.nowGameOdd[key][index].checked = !this.nowGameOdd[key][index].checked
            // this.$set(this.nowGameOdd[key][index], 'checked', !this.nowGameOdd[key][index].checked)
          }
        }
        // 强制刷新
        this.$forceUpdate()
      },
      subBtn() {
        let isDiff = true
        for (const key in this.nowGameOdd) {
          for (const index in this.nowGameOdd[key]) {
            for (const subIndex in this.nowGameOdd[key][index]) {
              if (this.nowGameOdd[key][index][subIndex] !== this.beforeOdd[key][index][subIndex]) {
                console.log('before', this.nowGameOdd[key][index][subIndex])
                console.log(this.beforeOdd[key][index][subIndex])
                isDiff = false
                break
              }
            }
          }
        }
        if (isDiff) {
          this.messTip = '未有数据变更！请修改后再提交！'
          this.dialogVisible = true
        } else {
          if (window.confirm('你确定要提交修改吗？')) {
            const temp = []
            for (const key in this.nowGameOdd) {
              for (const index in this.nowGameOdd[key]) {
                temp.push(this.nowGameOdd[key][index])
              }
            }
            for (const key in temp) {
              delete temp[key].checked
              delete temp[key].name
              delete temp[key].game
            }
            const params = {}
            params['game'] = this.selectedGame.value
            params['sync'] = true
            params['params'] = temp
            this.$store.dispatch('SaveBaseOdds', params)
              .then(response => {
                Message.success(response.message)
                this.changeGame('')
              })
            return true
          } else {
            return false
          }
        }
      },
      cancelBtn() {
        this.nowGameOdd = JSON.parse(JSON.stringify(this.beforeOdd))
      },
      changeCheckbox() {
        this.$forceUpdate()
      },
      // 切换游戏
      changeGame(value) {
        if (value) {
          this.selectedGame = value
        }
        this.getGameBaseOdds()
      },
      getGameBaseOdds() {
        // 重置数据
        this.checked_odds = false // 下方平均赔率复选框
        this.checked_max_odds = false // 下方最高赔率复选框
        this.checked_a_diff = false // 下方A盘赔率复选框
        this.checked_b_diff = false // 下方B盘赔率复选框
        this.checked_c_diff = false // 下方C盘赔率复选框
        this.checked_d_diff = false
        this.chooseAll = false

        this.text_odds = '' // 下方平均赔率文本框
        this.text_max_odds = '' // 下方最高赔率文本框
        this.text_a_diff = '' // 下方A盘赔率文本框
        this.text_b_diff = '' // 下方B盘赔率文本框
        this.text_c_diff = '' // 下方C盘赔率文本框
        this.text_d_diff = ''

        this.beforeOdd = []
        this.$store.dispatch('GetBaseOdds', { game: this.selectedGame.value })
          .then(response => {
            this.baseOdd = response
            for (const index in response[this.selectedGame.label]) {
              response[this.selectedGame.label][index]['checked'] = false
            }
            const halfLength = parseInt(response[this.selectedGame.label].length / 2)
            this.$set(this.nowGameOdd, 0, response[this.selectedGame.label].slice(0, halfLength))
            this.$set(this.nowGameOdd, 1, response[this.selectedGame.label].slice(halfLength))
            const list = JSON.parse(JSON.stringify(this.nowGameOdd))
            if (list.length > 0) {
              for (let a = 0; a < list.length; a++) {
                this.beforeOdd.push(list[a])
              }
            }
          })
      },
    },
    created() {
      this.getGameOptions()
      this.getGameBaseOdds()
    },
    data() {
      return {
        checked_odds: false, // 下方平均赔率复选框
        checked_max_odds: false, // 下方最高赔率复选框
        checked_a_diff: false, // 下方A盘赔率复选框
        checked_b_diff: false, // 下方B盘赔率复选框
        checked_c_diff: false, // 下方C盘赔率复选框
        checked_d_diff: false, // 下方D盘赔率复选框
        text_odds: '', // 下方平均赔率文本框
        text_max_odds: '', // 下方最高赔率文本框
        text_a_diff: '', // 下方A盘赔率文本框
        text_b_diff: '', // 下方B盘赔率文本框
        text_c_diff: '', // 下方C盘赔率文本框
        text_d_diff: '', // 下方D盘赔率文本框
        chooseAll: false, // 全选复选框
        dialogVisible: false,
        messTip: '', // 弹窗提示
        checkTogether: '', // 设置是否统一设置
        sameGame: [], // 相同的游戏
        baseOdd: '', // 游戏的基准赔率
        nowGameOdd: [], // 当前游戏基准赔率
        beforeOdd: [],
        selectedGame: {},
      }
    },
  }
</script>

<style scoped>
  .bread-nav{
    height:30px;
    font-size: 13px;
    line-height: 30px;
    background: #ECEFF2;
    border-bottom: 1px solid #d0dff2;
    padding: 0 0 0 10px;
    overflow: hidden;
  }
  .bread-nav-title{
    color:#386399;
    font-weight: bold;
    float: left;
    background: url("../../../../static/agent/img/tb.png") no-repeat left center;
    padding-left: 20px;
  }
  .bread-nav img{
    display: block;
    float: left;
    margin-top: 4px;
    padding-right: 5px;
  }
  .bread-nav-content{
    padding-left: 10px;
    float: left;
  }
  .bread-nav-content select{
    height:20px;
    line-height: 20px;
    margin-top: 5px;
  }
  .bread-nav-content-right{
    float: right;
    margin-right: 10px;
  }
  .bread-nav-content-right button{
    border:0;
    background-color: rgba(0, 0, 0, 0);
    color:#386399;
    font-weight: bold;
  }
  .bread-nav-content-right button:hover{
    text-decoration: underline;
  }
  .nav-button{
    color:#FFF;
    width: 103px;
    height: 28px;
    font-weight: bold;
    font-size: 14px;
    line-height: 28px;
    border:none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-color:#1554BE ;
    margin: 0 2px;
  }
  .nav-button:hover{
    text-decoration: underline;
  }
  .nav-buttonSelected{
    color:#ff8c3f;
  }

  .baseOdd-content{
    width: 100%;
    padding: 10px;
  }

  .baseOdd-top{
    display: flex;
    height:28px;
    line-height: 28px;
    margin-top: 10px;
  }
  .baseOdd-top ul{
    margin-left: 10px;
  }
  .top-table{
    width: 100%
  }
  .top-table td{
    vertical-align: top;
  }
  .gameOdds{
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .gameOdds th{
    background: linear-gradient(to bottom, #fff 0%, #b2d1e9 100%);
    height: 25px;
    text-align: center;
    color: #131950;
    font-weight: bold;
    line-height: 25px;
    font-size:14px;
    padding-left: 10px;
    padding-right: 10px;
    border: 1px solid #B9C2CB;
    margin: 0;
  }
  .gameOdds td{
    height: 25px;
    text-align: center;
    color: #131950;
    line-height: 25px;
    font-size:14px;
    padding: 5px;
    border: 1px solid #B9C2CB;
  }
  .gameOdds input[type='text']{
    width:60px;
    display:inline-block;
    height:20px;
    font-weight: lighter;
    color: #000;
  }
  .gameOdds-info{

  }
  .gameOdds-info:hover{
    background-color: #CAE8F6;
  }
  .baseOdd-middle{
    display: flex;
    text-align: center;
    justify-content: center;
    font-size:13px;
    height:30px;
    line-height: 30px;
  }
  .baseOdd-middle ul{
    padding: 0 10px;
  }
  .baseOdd-middle ul button{
    border:none;
    outline: none;
    background-color: rgba(0,0,0,0);
    color:red;
    cursor: pointer;
  }
  .baseOdd-middle ul button:hover{
    text-decoration: underline;
  }

  .baseOdd-footer{
    display: flex;
    text-align: center;
    justify-content: center;
    font-size:13px;
    height:30px;
    line-height: 30px;
  }
  .baseOdd-footer ul{
    padding: 0 5px;
  }
  .baseOdd-footer ul input[type='text']{
    width:60px;
    display: inline-block;
  }
  .baseOdd-footer ul button{
    color: #fae7e9;
    border: solid 1px #cf7878;
    background: #da5867;
    background: -webkit-gradient(linear,left top,left bottom,from(#ca7886),to(#be5c6c));
    background: -moz-linear-gradient(top,#f16c7c,#bf404f);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f16c7c',endColorstr='#bf404f');
    margin-right: 10px;
    height: 22px;
    width: 85px;
    line-height: 22px;
  }
  .baseOdd-footer ul button:hover{
    color:#fff100;
  }
  .baseOdd-bottom{
    text-align: center;
    margin-top: 20px;
  }
  .baseOdd-bottom button{
    width: 86px;
    height: 31px;
    line-height: 26px;
    color: #eeeeee;
    background: url(/static/agent/img/nav_bu.png) repeat-x left -134px;
    border: 0px;
  }
  .baseOdd-bottom button:hover{
    color: #fff100;
    background: url(/static/agent/img/nav_bu.png) repeat-x left -165px;
  }
  .myDialog li{
    padding: 10px 0;
    overflow: hidden;
  }
  .myDialog button{
    float: right;
  }

  .gameClass{
    background-color: #3f8cdc;
    padding: 0 10px;
  }
  .gameClass button{
    border:none;
    background-color: rgba(0,0,0,0);
    float: left;
    cursor: pointer;
    font-size:13px;
    color: #fff;
    height:30px;
    line-height: 30px;
    font-weight: bold;
  }
  .gameClass button:hover{
    text-decoration: underline;
    color:#fff100;
  }
  .isGameClassBtn{
    color:#fff100 !important;
  }
</style>
